<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocketgame1</title>
    <style>
        .kuang{text-align: center;margin-top:200px;}
        #mess{text-align: center}
        .value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;}
    </style>
</head>
<body>
<div id="mess">正在连接...</div>
<div class="kuang">
    <div class="value" id="value1">小明小明</div>
    <div class="value" id="value2">大胸大胸</div>
    <div class="value" id="value3">小张小张</div>
</div>
<script>
    var mess = document.getElementById("mess");
    if(window.WebSocket){
        var ws = new WebSocket('ws://localhost:8001');
        ws.onopen=function (e) {
            console.log("连接服务器成功");
            ws.send("game1");
        };
        ws.onclose=function (e) {
            console.log("连接关闭");
        };
        ws.onerror=function (e) {
            console.log("连接错误");
        };
        ws.onmessage = function(e){
            mess.innerHTML = e.data;
            document.querySelector(".kuang").onclick = function(e){
                var time = new Date();
                ws.send("game1点击了“" + e.target.innerHTML+"”");
            }
        }
    }

</script>
</body>
</html>